function showPersonalInfo() {
    // 先显示加载提示

    fetch('../personalInfo.student')
        .then(response => {
            if (!response.ok) {
                throw new Error('网络错误');
            }
            return response.text();
        })
        .then(html => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');

            const sid = doc.querySelector('input[name="sid"]')?.value || '';
            const sname = doc.querySelector('input[name="sname"]')?.value || '';
            const ssex = doc.querySelector('input[name="ssex"]')?.value || '';
            const sphone = doc.querySelector('input[name="sphone"]')?.value || '';
            const sage = doc.querySelector('input[name="sage"]')?.value || '';
            const sadress = doc.querySelector('input[name="sadress"]')?.value || '';

            const content = `
                <div class="info-container">
                    <h2>个人信息</h2>
                    <form id="personalInfoForm">
                        <div class="form-group">
                            <label>学号：</label>
                            <input type="text" value="${sid}" readonly>
                        </div>
                        <div class="form-group">
                            <label>姓名：</label>
                            <input type="text" value="${sname}" readonly>
                        </div>
                        <div class="form-group">
                            <label>性别：</label>
                            <input type="text" value="${ssex}" readonly>
                        </div>
                        <div class="form-group">
                            <label>电话：</label>
                            <input type="text" value="${sphone}" readonly>
                        </div>
                        <div class="form-group">
                            <label>年龄：</label>
                            <input type="text" value="${sage}" readonly>
                        </div>
                        <div class="form-group">
                            <label>地址：</label>
                            <input type="text" value="${sadress}" readonly>
                        </div>
                    </form>
                </div>
            `;

            // 更新页面内容
            document.getElementById('mainContent').innerHTML = content;
        })
        .catch(error => {
            console.error('获取个人信息失败:', error);
            document.getElementById('mainContent').innerHTML =
                '<div class="error">获取个人信息失败，请稍后重试</div>';
        });
}

// 添加样式
const style = `
    <style>
        .info-container {
            width: 80%;
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .form-group {
            margin: 15px 0;
            padding: 5px 0;
            border-bottom: 1px solid #eee;
        }
        
        .form-group label {
            display: inline-block;
            width: 80px;
            font-weight: bold;
            color: #333;
        }
        
        .form-group input {
            width: calc(100% - 100px);
            padding: 5px;
            border: none;
            background-color: transparent;
            color: #666;
        }
        
        .form-group input[readonly] {
            cursor: default;
        }
        
        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }
        
        .error {
            text-align: center;
            padding: 20px;
            color: red;
        }
        
        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
    </style>
`;

// 在页面加载时添加样式
document.head.insertAdjacentHTML('beforeend', style);

// 显示成绩查询
function showGrades() {

    fetch('../grades.student')
        .then(response => {
            if (!response.ok) {
                throw new Error('网络错误');
            }
            return response.text();
        })
        .then(html => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const gradesTable = doc.querySelector('.grades-info');

            if (gradesTable) {
                const content = `
                    <div class="grades-container">
                        <h2>成绩查询</h2>
                        ${gradesTable.outerHTML}
                    </div>
                `;
                document.getElementById('mainContent').innerHTML = content;
            } else {
                throw new Error('未找到成绩信息');
            }
        })
        .catch(error => {
            console.error('获取成绩失败:', error);
            document.getElementById('mainContent').innerHTML =
                '<div class="error">获取成绩信息失败，请稍后重试</div>';
        });
}

// 添加成绩表格样式
const gradeStyles = `
    <style>
        .grades-container {
            width: 80%;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
        }
        
        .grades-info table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        .grades-info th, .grades-info td {
            padding: 10px;
            text-align: center;
            border: 1px solid #ddd;
        }
        
        .grades-info th {
            background-color: #f5f5f5;
            font-weight: bold;
        }
        
        .grades-info tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        .grades-info tr:hover {
            background-color: #f0f0f0;
        }
    </style>
`;

// 在页面加载时添加样式
document.head.insertAdjacentHTML('beforeend', gradeStyles);

// 显示选课系统
function showCourseSelection() {
    document.getElementById('mainContent').innerHTML = '<div class="loading">加载中...</div>';

    fetch('../courseList.student')
        .then(response => {
            if (!response.ok) throw new Error('网络错误');
            return response.text();
        })
        .then(html => {
            document.getElementById('mainContent').innerHTML = `
                <div class="course-container">
                    <h2>选课系统</h2>
                    ${html}
                </div>
            `;
        })
        .catch(error => {
            console.error('获取课程列表失败:', error);
            document.getElementById('mainContent').innerHTML =
                '<div class="error">获取课程列表失败，请稍后重试</div>';
        });
}

function handleCourse(cid, isSelect) {
    const action = isSelect ? 'selectCourse' : 'dropCourse';
    fetch(`../${action}.student?cid=${cid}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const btn = event.target;
                const numberCell = document.querySelector(`.cnumber-${cid}`);
                const currentNumber = parseInt(numberCell.textContent);

                if (isSelect) {
                    numberCell.textContent = currentNumber - 1;
                    btn.textContent = '退课';
                    btn.className = 'drop-btn';
                    btn.onclick = () => handleCourse(cid, false);
                } else {
                    numberCell.textContent = currentNumber + 1;
                    btn.textContent = '选课';
                    btn.className = 'select-btn';
                    btn.onclick = () => handleCourse(cid, true);
                }
            } else {
                alert(isSelect ? '选课失败' : '退课失败');
            }
        })
        .catch(error => {
            console.error('操作失败:', error);
            alert('操作失败，请稍后重试');
        });
}

// 添加选课系统样式
const courseStyles = `
    <style>
        .course-container {
            width: 90%;
            margin: 20px auto;
            padding: 20px;
        }
        
        .course-list table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        .course-list th, .course-list td {
            padding: 12px;
            text-align: center;
            border: 1px solid #ddd;
        }
        
        .course-list th {
            background-color: #f5f5f5;
            font-weight: bold;
        }
        
        .course-list tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        .course-list button {
            padding: 5px 15px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        
        .select-btn {
            background-color: #4CAF50;
            color: white;
        }
        
        .drop-btn {
            background-color: #f44336;
            color: white;
        }
        
        button[disabled] {
            background-color: #cccccc;
            cursor: not-allowed;
        }
    </style>
`;

document.head.insertAdjacentHTML('beforeend', courseStyles);

// 显示课表
function showSchedule() {
    const content = `
        <h2>课表查看</h2>
        <table>
            <thead>
                <tr>
                    <th>时间</th>
                    <th>周一</th>
                    <th>周二</th>
                    <th>周三</th>
                    <th>周四</th>
                    <th>周五</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>第一节</td>
                    <td>高等数学</td>
                    <td></td>
                    <td>大学英语</td>
                    <td></td>
                    <td>计算机导论</td>
                </tr>
            </tbody>
        </table>
    `;
    document.getElementById('mainContent').innerHTML = content;
}

